<!-- 进口船代统计 -->
<template>
  <div class="import-ship">
    <!-- 查询 -->
    <el-form label-width="60px" :model="formData" size="mini" :inline="true" class="demo-form-inline">
      <el-row :gutter="15">
        <el-col :span="19">
          <el-form-item>
            <el-date-picker
              v-model="formData.applyTime"
              type="daterange"
              class="time-small"
              @change="parentName"
              value-format="yyyy-MM-dd"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期">
            </el-date-picker>
          </el-form-item>
          <el-form-item label="客户">
            <el-select v-model="formData.clientId" @change="parentName" @visible-change="selectStar" placeholder="请选择客户">
              <el-option label="所有客户" value=""></el-option>
              <el-option v-for="(item, index) in userInfo" :key="index" :label="item.search" :value="item.UserId"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="船公司">
            <el-select class="input-small" v-model="formData.boatAgentId" filterable @change="parentName" @visible-change="selectBoat" placeholder="请选择船公司">
              <el-option label="所有船公司" value=""></el-option>
              <el-option v-for="(item, index) in boatCompanyList" :key="index" :label="item.nameCncode" :value="item.boatComId"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="业务员">
            <el-select v-model="formData.theOperatorId" @change="parentName" @visible-change="selectMan" placeholder="请选择业务员">
              <el-option label="全部" value=""></el-option>
              <el-option v-for="(item, index) in salesman" :key="index" :label="item.fullName" :value="item.salesmanId"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="状态">
            <el-select v-model="formData.boxState" @change="parentName" placeholder="请选择状态">
              <el-option v-for="(item, index) in boxTate" :key="index" :label="item.lable" :value="item.value"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="5">
          <div style="display: flex; justify-content: flex-end;">
            <el-button type="primary" size="mini" @click="getImportShip(1, 15)">搜索</el-button>
            <el-button type="primary" size="mini" @click="tableSetting">列表设置</el-button>
          </div>
        </el-col>
      </el-row>
    </el-form>
    <!-- 操作 -->
    <el-row>
      <el-form size="mini" :inline="true" class="demo-form-inline">
        <el-form-item>
          <el-button size="mini" @click="checkExport()">导出</el-button>
          <el-button size="mini" @click="exportData()">导出全部</el-button>
          <el-select v-model="excelStyle" placeholder="">
            <el-option label="默认样式" value="0"></el-option>
            <el-option label="只有总费用样式" value="1"></el-option>
            <el-option label="有船名航次总费用样式" value="2"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
    </el-row>
    <!-- 表格 -->
    <el-table
      v-loading="loading"
      element-loading-text="拼命加载中"
      element-loading-spinner="el-icon-loading"
      element-loading-background="rgba(255, 255, 255, 0.5)"
      border :data="tableData" @selection-change="handleSelectionChange" style="width: 100%">
      <el-table-column type="selection" align="center" width="50"></el-table-column>
      <el-table-column
        v-for="item in myfieldList"
        :prop="item.props"
        :key="item.id"
        :width="item.width"
        align="center"
        :label="item.field">
      </el-table-column>
    </el-table>
    <div class="chargeable_table_pagination">
      <el-pagination
        @current-change="handleCurrentChange"
        :page-size="numb"
        @size-change="handleSizeChange"
        :page-sizes="[10, 15, 20]"
        :current-page.sync="pageNo"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total">
      </el-pagination>
    </div>
    <!-- 设置列表 -->
    <list-setting-dialog :allList="allStr" :listIndex="listIndex" @changtype="changtype" :table-props="fieldStr" @close="close" :open="open" :pageName="pageName"></list-setting-dialog>
  </div>
</template>

<script>
import {
  importShipAgency,
  boatCompanyList,
  SearchUserInfo,
  getSalesman,
  getField,
  importShipAgencyName,
  setputBoxFieldOrder
} from './api/importAddup'
import {
  exportData
} from '../finance/api/finance'
import {
  GetUserProfile
} from '../cpInfoMan/api/customerManagement'
import ListSettingDialog from '../shared/ListSettingDialog'
export default {
  components: {
    ListSettingDialog
  },
  data () {
    return {
      tableData: [],
      formData: {
        clientId: '',
        boatAgentId: '',
        theOperatorId: '',
        boxState: -1,
        applyTime: []
      },
      boxTate: [
        {lable: '全部', value: -1},
        {lable: '新业务', value: 0},
        {lable: '放单中', value: 1},
        {lable: '已完成', value: 2},
        {lable: '已拒绝', value: 3},
        {lable: '没预配', value: 4},
        {lable: '船期早', value: 5},
        {lable: '明天放', value: 6},
        {lable: '已退关', value: 7},
        {lable: '等通知', value: 8},
        {lable: '客户取消', value: 9},
        {lable: '退单', value: 10},
        {lable: '申请中', value: 11},
        {lable: '爆仓', value: 12},
        {lable: '有问题', value: 13},
        {lable: '缺箱子', value: 14},
        {lable: '换单中', value: 15}
      ],
      myobj: {
        shipAgencyName: '船代名称',
        num: '箱量',
        sumMoney: '总计'
      },
      multipleSelection: [],
      boatCompanyList: [],
      userInfo: [],
      salesman: [],
      pageName: '',
      fieldList: [],
      allList: [], // 所有的列表设置集合
      listIndex: '',
      key: false,
      open: false,
      loading: true,
      excelStyle: '0',
      fieldStr: '',
      allStr: '',
      myuser: {},
      pageNo: 1,
      numb: 15,
      total: 0
    }
  },
  mounted () {
    this.getImportShip(1, 15)
    this.myuserInfo()
    this.getBoatCompanyList()
    this.SearchUserInfo()
    this.getSalesman()
  },
  computed: {
    myfieldList: function () {
      return this.fieldList.filter(function (value) {
        return value.isShow === true
      })
    }
  },
  methods: {
    // 进口船代统计
    async getImportShip (pg, nb) {
      this.loading = true
      if (this.formData.applyTime === null) {
        this.formData.applyTime = []
      }
      const res = await importShipAgency({
        page: pg,
        num: nb,
        clientId: this.formData.clientId,
        boatAgentId: this.formData.boatAgentId,
        theOperatorId: this.formData.theOperatorId,
        boxState: this.formData.boxState,
        applyStartTime: this.formData.applyTime[0],
        applyEndTime: this.formData.applyTime[1]
      })
      if (res.status === 200) {
        this.tableData = res.data
        this.getSettingList('进口船代统计')
        this.total = parseInt(res.dataCount) || 0
        if (nb === 10000) {
          this.exportAll(res.data)
        }
        this.loading = false
      } else {
        this.$notify({
          title: '错误',
          message: res.msg,
          type: 'error'
        })
        this.loading = false
      }
    },
    // 获取业务员列表
    async getSalesman () {
      const res = await getSalesman({})
      if (res.status === 200) {
        this.salesman = res.data
      } else {
        this.$notify({
          title: '错误',
          message: res.msg,
          type: 'error'
        })
      }
    },
    // 获取船代公司列表
    async getBoatCompanyList () {
      const res = await boatCompanyList({})
      if (res.status === 200) {
        this.boatCompanyList = res.data
      } else {
        this.$notify({
          title: '错误',
          message: res.msg,
          type: 'error'
        })
      }
    },
    selectStar (value) {
      let _that = this
      if (value) {
        setTimeout(function () {
          _that.SearchUserInfo()
        }, 500)
      }
    },
    selectBoat (value) {
      let _that = this
      if (value) {
        setTimeout(function () {
          _that.getBoatCompanyList()
        }, 500)
      }
    },
    selectMan (value) {
      let _that = this
      if (value) {
        setTimeout(function () {
          _that.getSalesman()
        }, 500)
      }
    },
    // 获取客户信息
    async SearchUserInfo () {
      const res = await SearchUserInfo({})
      if (res.status === 200) {
        this.userInfo = res.data
      } else {
        this.$notify({
          title: '错误',
          message: res.msg,
          type: 'error'
        })
      }
    },
    // 页数
    handleCurrentChange (val) {
      this.getImportShip(val, this.numb)
      this.pageNo = val
    },
    // 每页条数
    handleSizeChange (val) {
      this.getImportShip(this.pageNo, val)
      this.numb = val
    },
    handleSelectionChange (val) {
      this.multipleSelection = val
    },
    // 封装的调用父组件方法
    parentName () {
      this.getImportShip(this.pageNo, this.numb)
    },
    // 子组件方法
    close () {
      this.open = false
    },
    // 上传默认数据
    async defaultData (mylist, pgnm) {
      const res = await setputBoxFieldOrder({
        pageName: pgnm,
        fieldList: mylist
      })
      if (res.status === 200) {
        console.log(pgnm, '初始化默认顺序')
        this.getSettingList(pgnm)
      } else {
        this.$notify({
          title: '出现错误',
          message: res.msg,
          type: 'error'
        })
      }
    },
    // 获取设置列表
    async getSettingList (pgnm) {
      this.pageName = pgnm
      const res = await getField({
        pageName: pgnm
      })
      if (res.status === 200) {
        if (res.data.length === 0) {
          let myList = [
            { field: '船代名称', props: 'shipAgencyName', isShow: 0, width: 110, colour: '', styleId: '', styleName: '默认样式', styleType: 1 },
            { field: '箱量', props: 'num', isShow: 0, width: 110, colour: '', styleId: '', styleName: '默认样式', styleType: 1 },
            { field: '超期费', props: 'CQF.money', isShow: 0, width: 110, colour: '', styleId: '', styleName: '默认样式', styleType: 1 },
            { field: '打单费', props: 'DDF.money', isShow: 0, width: 130, colour: '', styleId: '', styleName: '默认样式', styleType: 1 },
            { field: '服务费', props: 'FWF.money', isShow: 0, width: 110, colour: '', styleId: '', styleName: '默认样式', styleType: 1 },
            { field: '港建费', props: 'GJF.money', isShow: 0, width: 110, colour: '', styleId: '', styleName: '默认样式', styleType: 1 },
            { field: '港杂费', props: 'GZF.money', isShow: 0, width: 110, colour: '', styleId: '', styleName: '默认样式', styleType: 1 },
            { field: '坏污箱费', props: 'HWXF.money', isShow: 0, width: 110, colour: '', styleId: '', styleName: '默认样式', styleType: 1 },
            { field: '计划费', props: 'JHF.money', isShow: 0, width: 110, colour: '', styleId: '', styleName: '默认样式', styleType: 1 },
            { field: '快递费', props: 'KDF.money', isShow: 0, width: 110, colour: '', styleId: '', styleName: '默认样式', styleType: 1 },
            { field: '其他', props: 'QT.money', isShow: 0, width: 110, colour: '', styleId: '', styleName: '默认样式', styleType: 1 },
            { field: '台头费', props: 'TTF.money', isShow: 0, width: 110, colour: '', styleId: '', styleName: '默认样式', styleType: 1 },
            { field: '提箱费', props: 'TXF.money', isShow: 0, width: 110, colour: '', styleId: '', styleName: '默认样式', styleType: 1 },
            { field: '外理货费', props: 'WLHF.money', isShow: 0, width: 110, colour: '', styleId: '', styleName: '默认样式', styleType: 1 },
            { field: '滞纳金', props: 'ZNJ.money', isShow: 0, width: 110, colour: '', styleId: '', styleName: '默认样式', styleType: 1 },
            { field: '中理货费', props: 'ZLHF.money', isShow: 0, width: 110, colour: '', styleId: '', styleName: '默认样式', styleType: 1 },
            { field: '总费用', props: 'sumMoney', isShow: 0, width: 110, colour: '', styleId: '', styleName: '默认样式', styleType: 1 }
          ]
          this.defaultData(myList, pgnm)
        } else {
          let myid = ''
          if (res.showStyleId === '') {
            myid = 0
          }
          res.data.map((value, index) => {
            if (value.styleId === res.showStyleId) {
              myid = index
            }
            value.returnList.map(item => {
              if (item.isShow === '0') {
                item.isShow = true
              } else {
                item.isShow = false
              }
            })
          })
          this.allList = res.data
          this.listIndex = res.showStyleId
          this.fieldList = res.data[myid].returnList
          this.key = true
        }
      } else {
        this.$notify({
          title: '出现错误',
          message: res.msg,
          type: 'error'
        })
      }
    },
    changtype (e) {
      this.allList.map((item, index) => {
        if (item.styleId === e) {
          this.fieldList = this.allList[index].returnList
        }
      })
    },
    // 打开列表设置
    tableSetting () {
      this.allStr = JSON.stringify(this.allList)
      this.fieldStr = JSON.stringify(this.fieldList)
      this.getSettingList('进口船代统计')
      if (this.key) {
        this.open = true
      }
    },
    // 获取账号信息
    async myuserInfo () {
      const res = await GetUserProfile({})
      if (res.status === 200) {
        this.myuser = res.data[0]
      } else {
        this.$notify({
          title: '错误',
          message: res.msg,
          type: 'error'
        })
      }
    },
    // 全部导出
    exportAll (dt) {
      let mydata = []
      let mobj = this.tableData[0]
      for (var key in mobj) {
        if (mobj.hasOwnProperty(key) === true && mobj[key].name) {
          this.myobj[key] = mobj[key].name
        }
      }
      mydata = dt
      mydata.map((item) => {
        for (var index in item) {
          if (item.hasOwnProperty(index) === true && item[index].name) {
            item[index] = item[index].money
          }
        }
      })
      mydata.unshift(this.myobj)
      console.log(mydata)
      this.exportData_2(mydata)
    },
    // 选中导出
    checkExport () {
      let mydata = []
      let len = this.tableData.length
      let mobj = this.tableData[0]
      for (var key in mobj) {
        if (mobj.hasOwnProperty(key) === true && mobj[key].name) {
          this.myobj[key] = mobj[key].name
        }
      }
      if (len === 0) {
        this.$message({
          message: '没有数据，请添加数据后再导出！',
          type: 'warning'
        })
        return false
      }
      if (this.multipleSelection.length === 0) {
        this.getImportShip(1, 10000)
      } else {
        mydata = this.multipleSelection
        mydata.map((item) => {
          for (var index in item) {
            if (item.hasOwnProperty(index) === true && item[index].name) {
              item[index] = item[index].money
            }
          }
        })
        mydata.unshift(this.myobj)
        this.exportData_2(mydata)
      }
    },
    // 导出数据到Excel
    async exportData_2 (mdt) {
      const res = await exportData({
        jsonStr: JSON.stringify(mdt), // JSON字符串
        sheetName: '进口船代统计', // 表名
        comName: this.myuser.companyName, // 公司名称
        comPhone: this.myuser.mobile, // 公司电话
        comFax: this.myuser.fax // 公司传真
      })
      if (res.status === 200) {
        this.$notify({
          title: '成功',
          message: res.msg,
          type: 'success'
        })
        window.location.href = res.data[0].path
        this.getImportShip(1, 15)
      } else {
        this.$notify({
          title: '错误',
          message: res.msg,
          type: 'error'
        })
      }
    },
    // 导出数据到Excel
    async exportData () {
      const loading = this.$loading({
        lock: true,
        text: '正在导出数据请稍后!',
        spinner: 'el-icon-loading',
        background: 'rgba(255,255,255,0.5)',
        target: '.inner-container', // 需要遮罩的区域
        body: true
      })
      if (this.formData.applyTime === null) {
        this.formData.applyTime = []
      }
      const res = await importShipAgencyName({
        clientId: this.formData.clientId, // 客户编号
        boatAgentId: this.formData.boatAgentId, //  船公司编号
        theOperatorId: this.formData.theOperatorId, //  业务员编号
        boxState: '',
        applyStartTime: this.formData.applyTime[0], //  申请开始时间
        applyEndTime: this.formData.applyTime[1], //  申请结束时间
        styleType: this.excelStyle,
        page: this.pageNo, //  页数
        num: this.numb //  条数
      })
      if (res.status === 200) {
        this.$notify({
          title: '成功',
          message: res.msg,
          type: 'success'
        })
        loading.close()
        window.location.href = res.data[0].path
        this.getImportShip(1, 15)
      } else {
        this.$notify({
          title: '错误',
          message: res.msg,
          type: 'error'
        })
        loading.close()
      }
    }
  }
}
</script>

<style lang="less">
.import-ship {
  .el-input__inner {
    width: 130px;
  }
  .el-range-editor {
    width: 250px;
  }
}
</style>
